---
name: Decorators
order: 4
---

import { Playground, PropsTable } from 'docz'
import {code} from './site/data/poc.js'
import Dante from './editor/components/Dante/Dante.js'
import {CodeBlockConfig} from './editor/components/blocks/code'
import Prism from 'prismjs'

import {PrismDraftDecorator} from './editor/components/decorators/prism'
import Link from './editor/components/decorators/link'
import findEntities from './editor/utils/find_entities'

import { CompositeDecorator } from 'draft-js'
import MultiDecorator from 'draft-js-multidecorators'

# Decorators

To support flexibility for custom rich text, Draft provides a "decorator" system.
https://draftjs.org/docs/advanced-topics-decorators.html

Here is an example of the default decorators 


<Playground>
  <Dante 
    content={code}
    debug={true}
    widgets={[CodeBlockConfig()]}
    decorators={ (context)=> {
      return new MultiDecorator([
        PrismDraftDecorator({prism: Prism }),
        new CompositeDecorator(
          [{
            strategy: findEntities.bind(null, 'LINK', context),
            component: Link
          } ]
        )
      ])
      }
    }
  />
</Playground>